import { useEffect, useState } from 'react'
import './SettingModal.scss'
import RemoveSvg from '@/svg/RemoveSvg'
import {
  backgroundColorList,
  settingStore,
  SettingStore,
} from '@/store/settingStore'
import { langType } from '@/i18n/locales'
import { useI18n } from '@/i18n'
interface Props {
  show: boolean
  onHide: () => void
}

const SettingModal = ({ show, onHide }: Props) => {
  const [form, setForm] = useState<SettingStore>(settingStore.value)
  const { lang, setLang, t } = useI18n()
  useEffect(() => {
    setForm(settingStore.value)
  }, [show])
  function onSave() {
    settingStore.set({
      ...form,
    })
    onHide()
  }

  return (
    <div className="SettingModal-component">
      <div className={`SettingModal ${show ? 'show' : ''}`}>
        <div className="top">
          <div className="title">
            <span>{t('setting')}</span>
          </div>
          <ripple-button className="remove" onClick={onSave}>
            <RemoveSvg />
          </ripple-button>
        </div>
        <div className="center-box">
          <div className="input-box">
            <div className="label">
              <label>{t('lang')}</label>
            </div>
            <select
              className="select-input"
              value={lang}
              onChange={(e) => {
                setLang(e.target.value)
              }}>
              {langType.map((item) => {
                return (
                  <option key={item} value={item}>
                    {item}
                  </option>
                )
              })}
            </select>
          </div>
          <div className="input-box">
            <div className="label">
              <label>{t('canvasColor')}</label>
            </div>
            <div className="flex">
              {backgroundColorList.map((item, index) => {
                return (
                  <ripple-button
                    key={index}
                    className={`color-input${
                      item.name == form.canvasBackground ? ' select' : ''
                    }`}
                    onClick={async () => {
                      setForm({
                        ...form,
                        canvasBackground: item.name,
                        canvasBackgroundValue: item.style,
                      })
                    }}
                    style={item.style}></ripple-button>
                )
              })}
              <ripple-button
                className={`color-input${
                  'customize' == form.canvasBackground ? ' select' : ''
                }`}
                onClick={async () => {
                  setForm({
                    ...form,
                    canvasBackground: 'customize',
                  })
                }}>
                {t('customize')}
              </ripple-button>
            </div>
          </div>
          {form.canvasBackground == 'customize' && (
            <div className="input-box">
              <div className="label">
                <label>{t('customizeBgColor')}</label>
              </div>
              <div className="flex">
                <ripple-button
                  className={`color-input`}
                  style={{
                    background: form.diyCanvasBackgroundColor,
                  }}
                  onClick={async () => {
                    // @ts-ignore
                    const eyeDropper = new EyeDropper()
                    const value = await eyeDropper.open()
                    setForm({
                      ...form,
                      diyCanvasBackgroundColor: value.sRGBHex,
                    })
                  }}></ripple-button>
                <span>#</span>
                <input
                  type="text"
                  className="input"
                  value={form.diyCanvasBackgroundColor.substring(1)}
                  onChange={(e) => {
                    let value = e.target.value
                    value = value.replace(/[^0-9a-fA-F]/g, '')
                    if (value.length > 6) {
                      value = value.substring(0, 6)
                    }
                    setForm({
                      ...form,
                      diyCanvasBackgroundColor: `#${value}`,
                    })
                  }}
                />
              </div>
            </div>
          )}
        </div>
      </div>
      <div className={`mask ${show ? 'show' : ''}`} onClick={onSave}></div>
    </div>
  )
}

export default SettingModal
